<template>
	<view class="list">
		<view class="header">
			<view class="search">
				<image src="@/static/img/quickly/healthStatus/search@2x.png" mode=""></image>
				<input type="text" v-model="searchVal" placeholder="姓名" @blur="$emit('search',searchVal)">
			</view>
		</view>
		
		<view class="mainContent" v-if="list">
			<view class="listMular" v-if="list.length > 0">
				<uni-swipe-action>
					<view class="box" v-for="(item,index) in list" :key="index">
						<image src="@/static/img/quickly/healthStatus/number@2x.png" class="identifier"></image>
						<uni-swipe-action-item :right-options="options"  @click="bindClick(item)">
							<view class="top">
								<text class="assementNumber">{{item.status == 1 || item.status == 4 ? '评估编号' : item.sn}}</text>
								<text :class="item.status == 1 ? 'dataTime1' : 'dataTime'">{{item.status == 1 ? '未存档' : item.fillFormDate ? item.fillFormDate : item.floowDate ? item.floowDate : item.medicalTime ? item.medicalTime && item.medicalTime.substr(0,10)   : item.modifiedDate? item.modifiedDate :item.updateTime }}</text>
							</view>
							<view class="bottom">
								<view class="nameBox">
									<text class="userName">{{item.realName ? item.realName : item.memberNmae ? item.memberNmae : item.userName}}</text>
								</view>
								<view class="buttonBox">	
									<view class="qsDetail" @click="detail(item)" v-if="item.type == 1 || item.status == 2 || item.status == 1">详情</view>
									<view class="applyFor" @click="savestate(item)" v-if="item.status == 1 || item.status == 4">确认存档</view>
									<view class="applyFor" @click="detail(item)" v-else-if="item.type == 2">查看报告</view>
								</view>
							</view>
						</uni-swipe-action-item>
					</view>
				</uni-swipe-action>		
			</view>	
			<view class="nulldata" style="text-align: center;font-size: 26upx;color: #ccc" v-if="nullData && list.length > 0">
				<view>没有更多数据了</view>
			</view>
			
			<view class="noneChating" v-if="list.length <= 0">
				<image src="@/static/img/headFeature/chattingNone.png"></image>
				<view>暂无数据</view>
			</view>
		</view>
		<view class="location">
			<image src="@/static/img/quickly/healthStatus/add@2x.png"  @click="addQuestion"></image>
		</view>
	</view>
	
</template>

<script>
	import {filterData2} from '@/static/js/filter.js';
	export default {
		props:{
			list:{
				type: Array,
				default: function(){
					return []
				}	
			},
			options:{
				type: Array,
				default: function() {
					return []
				}
			},
			addpageUrl:{
				type: String,
				default: ''
			},
			nullData:{
				type: Boolean,
				default : true
			},
		},
		data () {
			return {
				searchVal:''
			}
		},
		methods:{
			filterData2,
			detail(item){
				this.$emit('detail',item)
			},
			savestate(item) {
				this.$emit('savestate',item)
			},
			creat(item) {
				this.$emit('creat',item)
			},
			addQuestion() {
				uni.navigateTo({
					url:this.addpageUrl
				})
			},
			bindClick(item) {
				this.$emit('bindClick',item)
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .uni-swipe_box{
		display: block !important;
	}
	/deep/.uni-swipe_button{
		padding: 0 20rpx;
		margin-left: 10rpx;
	}
	.list {
		background-color: #F8F8F8;
		width: 750upx;
		min-height: calc(100vh - 44px);
		padding-bottom: 140upx;
		.header {
			position: fixed;
			top: 88upx;
			left: 0;
			width: 750upx;
			height: 102upx;
			background: #05C6AD;
			display: flex;
			align-items: center;
			z-index: 100;
			.search {
				display: flex;
				align-items: center;
				width: 700upx;
				height: 54upx;
				background: #FFFFFF;
				border-radius: 27upx;
				margin: auto;
				image {
					width: 22upx;
					height: 22upx;
					margin: 0 24upx;
				}
				input {
					font-size: 24upx;
				}
			}
		}
		
		.mainContent {
			width: 702upx;
			margin: 102upx auto 0;
			padding-top: 24upx;		
			.listMular {
				width: 702upx;
				border-radius: 22upx;
				.box {
					width: 100%;
					height: 100%;
					background: #FFFFFF;
					border-radius: 22upx;
					padding:0 29upx 0 40upx;
					box-sizing: border-box;
					position: relative;
					margin-bottom: 25upx;
					.identifier{
						position: absolute;
						left: -6upx;
						top: 13%;
						width: 32upx;
						height: 30upx;
					}
					.top {
						height: 74upx;
						display: flex;
						align-items: center;
						font-size: 28upx;		
						border-bottom: 1upx solid #CCCCCC;
						.assementNumber {
							flex: 1;
							color: #666666;
							margin-left: 6upx;
							.physicalExamination {
								width: 50upx;
								height: 25upx;
								margin-left: 12upx;
							}
						}
						.assementType,.dataTime1 {
							color: #EA0B0B;
							text-align: right;
						}
						.dataTime {
							color: #666666;
						}
					}
					.bottom {
						display: flex;
						align-items: center;
						height: 97upx;
						.nameBox {
							flex: 1;
							display: flex;
							align-items: baseline;
							.userName {
								margin-left: 10upx;
								color: #000000;
								font-size: 40upx;
							}
							image {
								width: 24upx;
								height: 24upx;
								margin: 0 12upx 0 18upx;
							}
							.healthName {
								color: #05C6AD;
								font-size: 26upx;
							}
						}
						.buttonBox {
							display: flex;
							.qsDetail,
							.applyFor,
							.generating,
							.viewAssessment{
								width: 146upx;
								height: 50upx;
								background: #6AB7FF;
								border-radius: 25upx;
								color: #FFFFFF;
								font-size: 30upx;
								line-height: 50upx;
								text-align: center;
							}
							.applyFor {
								background-color: #05C6AD;
								margin-left: 24upx;
							}
						}
					}
				}
				.noData {
					image {
						width: 260upx;
						height: 200upx;
						display: table;
						margin: 246upx auto 32upx;
					}
					view {
						text-align: center;
						color: #666666;
						font-size: 30upx;
					}
				}
			}
		}
		.noneChating {
			padding-top: 228upx;
			image {
				display: block;
				margin: 0 auto;
				width: 260upx;
				height: 154upx;
			}
			view {
				margin: 24px auto;
				text-align: center;
				color: #333333;
				font-size: 13px;
			}
		}
		.location {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 750upx;
			height: 135upx;
			background: url('@/static/img/quickly/healthStatus/suspensionBg@2x.png') no-repeat;
			background-size: 100% 100%;
			image {
				position: fixed;
				bottom: 26upx;
				left: 50%;
				transform: translateX(-50%);
				width: 90upx;
				height: 90upx;
			}
		}
	}
	
</style>
